<template>
  <view class="category">
    <view class="category-item"  v-for="item in list" :key="item.id"  @click="goCategory">
<!--    <navigator
        class="category-item"
        hover-class="none"
        url="/pages/index/index"
        v-for="item in list"
        :key="item.id"
    >-->
      <image class="icon" :src="item.icon" ></image>
      <text class="text">{{item.name}}</text>
<!--    </navigator>-->
    </view>
  </view>
</template>

<script setup lang="ts">

import type { CategoryItem} from "@/types/home";


// 定义 props 接收 父组件传递过来的数据
defineProps<{
  list: CategoryItem[];
}>();

// 页面跳转
const goCategory = () => {
  // 保留当前页面，跳转到应用内的某个页面
  uni.navigateTo({url: '/pages/index/index'});
}

</script>

<style lang="scss">
/* 前台类目 */
.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;

  .category-item {
    width: 150rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {
      width: 100rpx;
      height: 100rpx;
    }

    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>